import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_demo/conf/m3.dart';
import 'package:flutter_demo/pages/base/layout_params/physical_model_page.dart';
import 'package:flutter_demo/pages/page_with_title.dart';

import '../../../widgets/app_widgets.dart';

class DecorationPage extends PageWithTitle {
  const DecorationPage() : super("装饰组件(DecoratedBox、ColoredBox)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("装饰组件，用于设置背景、圆角、边框等效果"),
      AppSpacer.large,
      _DecoratedExample(),
      AppSpacer.large,
      UlItem("DecoratedBox"),
      BodyText("装饰组件可以用于设置背景、圆角、边框"),
      LabelText("- color，背景色"),
      LabelText("- image，背景图片"),
      LabelText("- border，边框样式"),
      LabelText("- borderRadius，边框圆角"),
      LabelText("- boxShadow，阴影（可以自定义颜色，但不知为何outer模糊效果不起作用），推荐"
          "使用PhysicalModel组件来实现"),
      PageLink(PhysicalModelPage()),
      LabelText("- gradient，渐变背景"),
      _LinearGradientExample(),
      LabelText("  - LinearGradient，线性渐变"),
      _RadialGradientExample(),
      LabelText("  - RadialGradient，径向渐变"),
      _SweepGradientExample(),
      LabelText("  - SweepGradient，扫描渐变"),
      LabelText("- shape，设置形状，只有矩形与圆形可选"),
      AppSpacer.large,
      _ColoredExample(),
      AppSpacer.mini,
      UlItem("ColoredBox"),
      BodyText("若只需要设置颜色，直接用ColoredBox设置背景即可"),
    ];
  }
}


class _DecoratedExample extends StatelessWidget {
  const _DecoratedExample();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          width: 100,
          height: 100,
          child: DecoratedBox(
            decoration: BoxDecoration(
              color: Theme.of(context).colorScheme.primaryContainer,
              border: BorderDirectional(
                start: BorderSide(
                  color: Theme.of(context).colorScheme.outline,
                  width: 4,
                ),
                top: BorderSide(
                  color: Theme.of(context).colorScheme.outline,
                  width: 3,
                ),
                end: BorderSide(
                  color: Theme.of(context).colorScheme.outline,
                  width: 2,
                ),
                bottom: BorderSide(
                  color: Theme.of(context).colorScheme.outline,
                  width: 1,
                ),
              ),
              borderRadius: M3.connerRadiusMedium,
              boxShadow: [
                BoxShadow(
                    color: Theme.of(context).colorScheme.primary.withAlpha(128),
                    offset: const Offset(5, 5),
                    spreadRadius: 0,
                    blurStyle: BlurStyle.outer),
              ],
            ),
            position: DecorationPosition.background,
          ),
        ),
      ],
    );
  }
}

class _LinearGradientExample extends StatelessWidget {
  const _LinearGradientExample();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(
          width: 40,
          height: 40,
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Colors.red,
                Colors.green,
                Colors.blue,
              ],
              //转变位置从0.0设置到1.0，可以自己设置从哪里开始切换到下个颜色，默认是等分
              stops: [
                0.0,
                0.2,
                1.0,
              ],
            ),
          ),
        ),
        AppSpacer.mini,
        Container(
          width: 40,
          height: 40,
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              //可以通过对齐自己设置渐变开始点与结束点
              begin: Alignment(-1, -1),
              end: Alignment(1, 1),
              colors: [
                Colors.red,
                Colors.green,
                Colors.blue,
              ],
            ),
          ),
        ),
        AppSpacer.mini,
        Container(
          width: 40,
          height: 40,
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Colors.red,
                Colors.green,
                Colors.blue,
              ],
              //旋转也可以达到类似的效果，但因为旋转它不是从(-1,-1)到(1,1)
              transform: GradientRotation(pi / 4),
            ),
          ),
        ),
        AppSpacer.mini,
        Container(
          width: 40,
          height: 40,
          decoration: const BoxDecoration(
            gradient: LinearGradient(
                colors: [
                  Colors.red,
                  Colors.green,
                  Colors.blue,
                ],
                transform: GradientRotation(pi / 4),
                //我们可以设置平铺效果，默认在开始与结束位置之外是复制最边缘的像素
                tileMode: TileMode.decal
            ),
          ),
        ),
      ],
    );
  }
}
class _RadialGradientExample extends StatelessWidget {
  const _RadialGradientExample();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(
          width: 40,
          height: 40,
          decoration: const BoxDecoration(
            gradient: RadialGradient(
              colors: [
                Colors.red,
                Colors.green,
                Colors.blue,
              ],
              radius: 0.5*1.414,
            ),
          ),
        ),
        AppSpacer.mini,
        Container(
          width: 40,
          height: 40,
          decoration: const BoxDecoration(
            gradient: RadialGradient(
              //有意思，只设置开始点位可以定位渐变中心
              center: Alignment(-0.66, 0),
              //设置焦点类似于从z轴将本来的中心点分离成上下两个点，然后光源从下方焦点射向上方中心点
              focal: Alignment(0.66, 0),
              colors: [
                Colors.red,
                Colors.green,
                Colors.blue,
              ],
              radius: 0.5*1.414,
            ),
          ),
        ),
      ],
    );
  }
}
class _SweepGradientExample extends StatelessWidget {
  const _SweepGradientExample();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(
          width: 40,
          height: 40,
          decoration: const BoxDecoration(
            gradient: SweepGradient(
              colors: [
                Colors.red,
                Colors.green,
                Colors.blue,
              ],
            ),
          ),
        ),
        AppSpacer.mini,
        Container(
          width: 40,
          height: 40,
          decoration: const BoxDecoration(
            gradient: SweepGradient(
                colors: [
                  Colors.red,
                  Colors.green,
                  Colors.blue,
                ],
                startAngle: 0,
                endAngle: pi,
                tileMode: TileMode.mirror
            ),
          ),
        ),
      ],
    );
  }
}

class _ColoredExample extends StatelessWidget {
  const _ColoredExample();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          width: 100,
          height: 100,
          child: ColoredBox(
            color: Theme.of(context).colorScheme.primaryContainer,
          ),
        ),
      ],
    );
  }
}
